<template>
  <div class="all-container">
    <div class="home">
        <!-- <div class="mb-20"  v-if="isReady">
          <CricleCard  @company-change="handleCompanyChange"/>
        </div> -->
        <div class="mb-20">
          <SalaryComparison  />
        </div>
        <div class="mb-20">
          <ZuiXinChou />
        </div>
        <div class="mb-20">
          <ZuiXinChouCard />
        </div>
        <div class="mb-20">
          <ZhiChangTuCao />
        </div>
        <div class="mb-20">
          <Roastlist  />
        </div>
        <div class="mb-20">
          <CampusRecruitment />
        </div>

      

        <!-- 使用报告图片组件 -->
        <ReportImage v-model="showReportDialog" @navigate="handleNavigation" />
      <!-- <div class="mb-20">
        <FooterImage 
          imageUrl="../src/assets/images/footer.png" 
          altText="" 
        />
      </div> -->
        <!-- <div class="mb-20">
          <XinZhiFenXi />
        </div> -->
      </div>

        <div class="container ">
          <FooterImage 
            imageUrl="../src/assets/images/footer.png" 
            altText="" 
          />
      </div>
  </div>
  
</template>

<script>
import CricleCard from '@/components/CricleCard.vue'
import SalaryComparison from '@/components/SalaryComparison.vue'
import ZuiXinChou from '@/components/ZuiXinChou.vue'
import ZuiXinChouCard from '@/components/ZuiXinChouCard.vue'
import ZhiChangTuCao from '@/components/ZhiChangTuCao.vue'
import TuCaoCard from '@/components/TuCaoCard.vue'
import Roastlist from '@/views/RoastlistFour.vue'
import XinZhiFenXi from '@/components/XinZhiFenXi.vue'
import CampusRecruitment from '@/components/CampusRecruitment.vue'
import FooterImage from '@/components/Footer.vue'
import ReportImage from '@/components/ReportImage.vue'



export default {
  name: 'Home',
  components: {
    CricleCard,
    SalaryComparison,
    ZuiXinChou,
    ZuiXinChouCard,
    ZhiChangTuCao,
    TuCaoCard,
    XinZhiFenXi,
    Roastlist,
    CampusRecruitment,
    FooterImage,
    ReportImage
  },
  data() {
    return {
      selectedCompanies: null,
      isReady: false,
      showReportDialog: true,
      
    }
  },
  methods: {
    handleCompanyChange(companies) {
      console.log('Home 组件接收到 company-change 事件:', companies)
      this.selectedCompanies = companies
    },
     handleNavigation(path) {
      this.$router.push(path)
    }
  },
  mounted() {
    // 延迟 100ms 确保 Vite 代理就绪
    setTimeout(() => {
      this.isReady = true
    }, 100)
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.container{
  width: 100%;
}
/* 自定义间距类 */
.mb-20 {
  margin-bottom: 40px !important;
}
.mb-60{
  margin-bottom: 250px !important;
}

.float-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



</style>